<template>
  <div class="wrapper">
    <div class="loading" v-if="loading">
		<p>{{ loadingTxt }}</p>
	</div>
    <div class="wrap" v-show="!loading">
        <div class="container">
            <transition-group enter-active-class='animated fadeInDown'>
                <div class="box box1" v-if="cssanimate" :key="1">
                    <img src="../../assets/logo.png" alt="">
                </div>
                <div class="box box2" v-if="cssanimate" :key="2">
                    <img src="../../assets/home-title.png" alt="">
                </div>
            </transition-group>
        </div>
        <div class="container">
            <transition-group enter-active-class='animated'>
                <div class="box box3 fadeIn" v-if="cssanimate" :key="1">
                    <img src="../../assets/home-people.png" alt="">
                </div>
                <div class="box box4 fadeInDown" v-if="cssanimate" :key="2" @click="goto">
                    <img src="../../assets/home-button.png" alt="">
                </div>
            </transition-group>
            
            <transition-group>
                <div class="animated zi zi1" ref="zi1" v-if="cssanimate" :key="1">
                    <img src="../../assets/home-zi1.png" alt="">
                </div>
                <div class="animated zi zi2" ref="zi2" v-if="cssanimate" :key="2">
                    <img src="../../assets/home-zi2.png" alt="">
                </div>
                <div class="animated zi zi3" ref="zi3" v-if="cssanimate" :key="3">
                    <img src="../../assets/home-zi3.png" alt="">
                </div>
                <div class="animated zi zi4" ref="zi4" v-if="cssanimate" :key="4">
                    <img src="../../assets/home-zi4.png" alt="">
                </div>
                <div class="animated zi zi5" ref="zi5" v-if="cssanimate" :key="5">
                    <img src="../../assets/home-zi5.png" alt="">
                </div>
                <div class="animated zi zi6" ref="zi6" v-if="cssanimate" :key="6">
                    <img src="../../assets/home-zi6.png" alt="">
                </div>
                <div class="animated zi zi7" ref="zi7" v-if="cssanimate" :key="7">
                    <img src="../../assets/home-zi7.png" alt="">
                </div>
            </transition-group>
        </div>
    </div>

  </div>
</template>

<script>
export default {
    name: 'home',
    components: {},
    data () {
        return {
            loading: this.GLOBAL.loading,
            loadingTxt: "LOADING...0%",
            now: 0,
            picArr: [
                require("../../assets/addr-button.png"),
                require("../../assets/addr-icon1.png"),
                require("../../assets/addr-icon2.png"),
                require("../../assets/bg.png"),
                require("../../assets/ewm1.png"),
                require("../../assets/ewm2.png"),
                require("../../assets/home-button.png"),
                require("../../assets/home-people.png"),
                require("../../assets/home-title.png"),
                require("../../assets/home-zi1.png"),
                require("../../assets/home-zi2.png"),
                require("../../assets/home-zi3.png"),
                require("../../assets/home-zi4.png"),
                require("../../assets/home-zi5.png"),
                require("../../assets/home-zi6.png"),
                require("../../assets/home-zi7.png"),
                require("../../assets/icon-err.png"),
                require("../../assets/icon-right.png"),
                require("../../assets/logo.png"),
                require("../../assets/question-1-bg.png"),
                require("../../assets/question-1-people.png"),
                require("../../assets/question-2-bg.png"),
                require("../../assets/question-2-people.png"),
                require("../../assets/question-3-bg.png"),
                require("../../assets/question-3-people.png"),
                require("../../assets/question-bg.png"),
                require("../../assets/question-option-choose.png"),
                require("../../assets/question-option.png"),
                require("../../assets/share-bg.png")
            ],
            cssanimate: false
        }
    },
    mounted () {
        var that = this;
        that.loadImg();
    },
    methods: {
        loadImg () {
            var that = this;
            var img =  new Image();
            var sum = that.picArr.length;
            img.src = that.picArr[that.now]; 
            
            function go () {
                that.now ++ ;
                that.loadingTxt = 'LOADING...'+parseInt( that.now/sum *100 ) + "%";
                if(that.now < that.picArr.length){
                    that.loadImg();
                }else{
                    that.loadingTxt = 'LOADING...'+parseInt( that.now/sum *100 ) + "%";
                    setTimeout(function() {
                        that.loading = false;
                        that.GLOBAL.loading = false;
                        that.cssanimate = true;
                    }, 300);
                }
            }
            img.onerror = go;
            img.onload = go;
        },
        goto () {
            this.$router.push('/question1')
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    height: 100%;
}
.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
}
.wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    .container {
        position: relative;
    }
}
.box {}
.box1 {
    animation-delay:.12s;
    img{
        width: 25%;
        margin: 2vh auto;
        display: block;
    }
}
.box2 {
    animation-delay:.2s;
    img{
        width: 80%;
        margin: 0 auto;
        display: block;
    }
}
.box3 {
    animation-delay:.18s;
    padding-bottom: 10vh;
    position: relative;
    z-index: 2;
    img{
        width: 48%;
        margin: 0 auto;
        display: block;
    }
}
.box4 {
    animation-delay:.1s;
    position: absolute;
    z-index: 3;
    bottom: 10vh;
    width: 60%;
    left: 50%;
    margin-left: -34%;
	animation-delay: 1.2s;
    img{
        width: 100%;
        margin: 0 auto;
        display: block;
    }
}

.zi {
    position: absolute;
    left: 50%;
    img {
        width: 100%;
    }
}

.zi1 {
    top: 6%;
    width: 36%;
    margin-left: -38%;
	animation-name: fadeInRight;
	animation-duration: .2s;
	animation-delay: 1.2s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
.zi2 {
    top: 30%;
    width: 25%;
    margin-left: -42%;
	animation-name: fadeInRight;
	animation-duration: .2s;
	animation-delay: 1.6s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
.zi3 {
    top: 40%;
    width: 25%;
    margin-left: -40%;
	animation-name: fadeInRight;
	animation-duration: .2s;
	animation-delay: 1.8s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
.zi4 {
    top: 29%;
    width: 18%;
    margin-left: 18%;
	animation-name: fadeInLeft;
	animation-duration: .2s;
	animation-delay: 1.6s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
.zi5 {
    top: 22%;
    width: 22%;
    margin-left: 14%;
	animation-name: fadeInLeft;
	animation-duration: .2s;
	animation-delay: 1.3s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
.zi6 {
    top: 36%;
    width: 34%;
    margin-left: 5%;
	animation-name: fadeInLeft;
	animation-duration: .2s;
	animation-delay: 1.9s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
.zi7 {
    top: 14%;
    width: 25%;
    margin-left: -39%;
	animation-name: fadeInRight;
	animation-duration: .2s;
	animation-delay: 1.4s;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

.test1 {
}

.test2 {
}


@keyframes scaleFadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes shakes {
	from{transform:translate(0, 0)}
    to{transform:translate(0, 6px)}
}

@media (max-height:480px){
    .box1 {
        animation-delay:.12s;
        img{
            width: 20%;
            margin: 10px auto;
            display: block;
        }
    }
    .box2 {
        animation-delay:.16s;
        img{
            width: 70%;
            margin: 0 auto;
            display: block;
        }
    }
    .box3 {
        animation-delay:.18s;
        padding-bottom: 10vh;
        img{
            width: 40%;
            margin: 0 auto;
            display: block;
        }
    }
}
</style>
